<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta content="description" name="description">
  <meta content="Mashup templates have been developped by Orson.io team" name="author">

  <!-- Disable tap highlight on IE -->
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/assets/apple-icon-180x180.png">
  <title>index</title>
  <link href="/static/css/main.3f6952e4.css" rel="stylesheet">
  <link href="/static/css/swiper-bundle.min.css" rel="stylesheet">
    <style>

    .swiper-container {
        top: 40%;
      left: 15%;
      width: 100%;
      height: 30%;
        position: absolute;
    }
    p {
                width: 100px;
                height: 135px;
                background-color: grey;
                float: left;
        padding-top: 10px;
        margin-left: 20px;
        color: white;
        font-size: 15px;
            }
	.swiper-wrapper{
	  /* 通过改变animation-timing-function 制作弹性切换效果 */
		    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
		}
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .font {
        font-weight: bold;
    }
    </style>
</head>
<body class="minimal" onload="queryWeather()">
<div id="site-border-left"></div>
<div id="site-border-right"></div>
<div id="site-border-top"></div>
<div id="site-border-bottom"></div>
<!-- Add your content of header-->
<header>
  <nav class="navbar  navbar-fixed-top navbar-inverse">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav ">
          <li><a href="{% url 'facerecognition:index' %}" class="font">首页</a></li>
        </ul>
         <ul class="nav navbar-nav navbar-right">
            {% if request.session.is_login %}
                  <li><a>你好,{{ request.session.user_name }}</a></li>
                 <li><a href="{% url 'users:logout' %}" class="font">登出</a></li>
            {% else %}
                 <li><a href="{% url 'users:login' %}" class="font">登录</a></li>
                 <li><a href="{%  url 'users:register' %}" class="font">注册</a></li>
            {% endif %}
          </ul>
      </div>
    </div>
  </nav>
</header>
<!-- Add your site or app content here -->
  <div class="hero-full-container background-image-container white-text-container" style="background-image: url('/static/assets/images/bg.jpg')">
    <div class="container">
      <div class="row">

        <div class="col-xs-12">

          <div class="hero-full-wrapper">
            <div class="text-content">
                <div class="swiper-container">
                    <div class="swiper-wrapper">

                      <div class="swiper-slide" style="background-image:url('/static/assets/images/banner1.jpg');background-size: cover;background-repeat: no-repeat"></div>
                      <div class="swiper-slide" style="background-image:url('/static/assets/images/banner2.jpg');background-size: cover;background-repeat: no-repeat"></div>
                      <div class="swiper-slide" style="background-image:url('/static/assets/images/banner3.jpg');background-size: cover;background-repeat: no-repeat"></div>
                      <div class="swiper-slide" style="background-image:url('/static/assets/images/banner4.jpg');background-size: cover;background-repeat: no-repeat"></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
{#              <h1>你好,{{ request.session.user_name }}<br>#}
{#                <span id="typed-strings">#}
{#                  {% if request.session.is_login %}#}
{#                    <span>这是一个人脸识别的网页应用</span>#}
{#                    <span>如果想开始体验，请点击登录</span>#}
{#<!--                    <span>Working as a Freelance</span>-->#}
{#                  {% else %}#}
{#                    <span>这是一个人脸识别的网页应用</span>#}
{#                    <span>如果想开始体验，请点击登录</span>#}
{#                  {% endif %}#}
{#                </span>#}
{#                <span id="typed"></span>#}
{#              </h1>#}
            </div>
          </div>
        </div>
      </div>
        <div class="row" >
            <div class="col-xs-12">
               <div id="box"></div>
            </div>
        </div>
    </div>
  </div>
<script type="text/javascript" src="/static/js/swiper-bundle.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function (event) {
     type();
     movingBackgroundImage();
  });

  var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
</script>
<script type="text/javascript">
            var sel = document.querySelector("select");
            var div = document.querySelector("div");
            function queryWeather(){
                var city = "武汉";
                div.innerHTML = "";
                ajax.get({
                    url: "http://wthrcdn.etouch.cn/weather_mini?city=" + encodeURIComponent(city),
                    onSuccess: function(result) {
                        var obj = JSON.parse(result);
                        var smg = obj.data.forecast;
                        for(var s of smg) {
                            var date = s.date;
                            var high = s.high;
                            var fengli = s.fengli;
                            var low = s.low;
                            var fengxiang = s.fengxiang;
                            var type = s.type;
                            var p = document.createElement("p");
                            p.innerHTML = date + "<br>" + type + "<br>"
                            + high + "<br>" + low + "<br>" + fengxiang + "<br>" + fengli;
                            div.appendChild(p);
                        }
                    }
                })
            }
            ajax = {
    /*使用get方法进行ajax请求*/
    get: function (option){
        if (!option.url) return; //
        if (typeof option.onSuccess != "function") return;

        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
        xhr.open("GET", option.url, true);
        xhr.onreadystatechange = function (){
            if (xhr.readyState == 4){
                if (xhr.status == 200){
                    option.onSuccess(xhr.responseText);
                }else{
                    if (typeof option.onFail == "function"){
                        option.onFail(xhr.responseText);
                    }
                }
            }
        }
        xhr.send(null);
    },
    /*使用post方式进行ajax请求*/
    post: function (option){
        if (!option.url) return; //
        if (typeof option.onSuccess != "function") return;
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Micosoft.XMLHTTP")
        xhr.open("POST",option.url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    option.onSuccess(xhr.responseText);
                }else{
                    if(typeof option.onFail == "function"){
                        option.onFail(xhr.responseText);
                    }
                }
            }
        }
        //如果是使用的post提交表单数据，需要添加这个请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(option.data);
    }
}
        </script>
{#<script type="text/javascript" src="/static/js/main.70a66962.js"></script>#}
</body>
</html>